<template>
  <div id="app">
  	<!--头部-->
  	<header-com :title="title"></header-com>
  	<!--内容-->
  	<home-com v-if="showindex==0"></home-com>
  	<message-com v-else-if="showindex==1"></message-com>
  	<discover-com v-else-if="showindex==2"></discover-com>
  	<mime-com v-else></mime-com>
  	<!--底部按钮-->
  	<tabs-com @passTabs="getTabsValue"></tabs-com>
  </div>
</template>

<script>
import tabs from "./tabs.vue"
import header from "./header.vue"

import home from "./content/home.vue"
import message from "./content/message.vue"
import discover from "./content/discover.vue"
import mime from "./content/mime.vue"

export default {
  name: 'app',
  data () {
    return {
    	title: "首页",
    	showindex: 0
    }
  },
  methods:{
  	getTabsValue(obj){
  		this.title = obj.title;
  		this.showindex = obj.index;
  	}
  },
  components:{
  	"tabs-com":tabs,
  	"header-com":header,
  	"home-com":home,
  	"message-com":message,
  	"discover-com":discover,
  	"mime-com":mime,
  }
}
</script>

<style>
*{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
</style>
